<div class="table-container">
  <mat-table class="embedded-table"
             [dataSource]="dataSource"
             matSort
             (matSortChange)="this.sort.next($event)"
             [matSortActive]="sort.value.active"
             [matSortDirection]="sort.value.direction"
             multiTemplateDataRows>
    <!-- Checkbox Column -->
    <ng-container matColumnDef="selected">
      <mat-header-cell mat-header-cell
                       *matHeaderCellDef
                       mat-sort-header
                       matTooltip="Sort by Selected">
        <mat-icon>
          layers
        </mat-icon>
      </mat-header-cell>
      <mat-cell *matCellDef="let row" (mouseenter)="previewRow(row)">
        <layer-toggle (click)="$event.stopPropagation()"
                      (mouseenter)="previewRow(row)"
                      [color]="colorService.getColorFor(row.label)"
                      [toggledOn]="selection.isSelected(row.label)"
                      (toggledOnChange)="toggleSelection(row)"></layer-toggle>
      </mat-cell>
    </ng-container>

    <!-- PID Column -->
    <ng-container matColumnDef="pid">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Antagonist PID </mat-header-cell>
      <mat-cell *matCellDef="let thread"> {{thread.pid}} </mat-cell>
    </ng-container>

    <!-- Command Column -->
    <ng-container matColumnDef="command">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Antagonist Command </mat-header-cell>
      <mat-cell *matCellDef="let thread"> {{thread.command}} </mat-cell>
    </ng-container>

    <!-- Start Time Column -->
    <ng-container matColumnDef="startTimeNs">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Start Time </mat-header-cell>
      <mat-cell *matCellDef="let thread"> {{formatTime(thread.startTimeNs)}} </mat-cell>
    </ng-container>

    <!-- End Time Column -->
    <ng-container matColumnDef="endTimeNs">
      <mat-header-cell *matHeaderCellDef mat-sort-header> End Time </mat-header-cell>
      <mat-cell *matCellDef="let thread"> {{formatTime(thread.endTimeNs)}} </mat-cell>
    </ng-container>

    <!-- Duration Column -->
    <ng-container matColumnDef="duration">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Duration </mat-header-cell>
      <mat-cell *matCellDef="let thread"> {{formatTime(thread.duration)}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">
    </mat-header-row>
    <mat-row *matRowDef="let thread; columns: displayedColumns;"
             class="selectable-row"
             (mouseenter)="previewRow(thread)"
             (mouseout)="$event.stopPropagation();">
    </mat-row>
  </mat-table>
  <div *ngIf="data.value.length == 0" class="spinner-container">
    <mat-progress-spinner *ngIf="dataPending; else noData"
      color="primary"
      mode="indeterminate">
    </mat-progress-spinner>
    <ng-template #noData>
      <i>No data to display</i>
    </ng-template>
  </div>
  <mat-paginator [pageSize]="pageSize" showFirstLastButtons>
  </mat-paginator>
</div>
